<template>
  <a-sub-menu v-if="menu.children && menu.children.length" :key="menu.id">
    <template #title>
      <span class="menu-item-content">
        <component v-if="menu.icon" :is="getIcon(menu.icon)" />
        <span class="menu-title">{{ menu.title || menu.name }}</span>
      </span>
    </template>
    <MenuRecursive
      v-for="child in menu.children"
      :key="child.id"
      :menu="child"
      @menu-click="$emit('menu-click', $event)"
    />
  </a-sub-menu>
  <a-menu-item v-else :key="menu.id" @click="$emit('menu-click', menu)">
    <span class="menu-item-content">
      <component v-if="menu.icon" :is="getIcon(menu.icon)" />
      <span class="menu-title">{{ menu.title || menu.name }}</span>
    </span>
  </a-menu-item>
</template>

<script setup>
import { inject } from 'vue'
const props = defineProps({
  menu: { type: Object, required: true }
})
const emit = defineEmits(['menu-click'])
const getIcon = inject('getIcon', () => undefined)
</script> 